<script setup lang="ts">
import { onMounted, Ref, ref } from 'vue'
const gloy = ref(5)
const glox = ref(5)
const isWin = ref(false)
interface Client {
  x: number
  y: number
  who: number
}

enum type {
  mess,
}

interface Message{
  sender:string
  content:string
}

interface SendType {
  type: type.mess
  message: string
}

const whiteSave: Ref<Client[]> = ref([])
const blackSave: Ref<Client[]> = ref([])
// 0 is white; 1 is black
const who = ref(0)
const initScenes = () => {

}

const click = (x: number, y: number) => {
  if (isWin.value) {
    return
  }

  // if (x < glox.value - 2 && y < gloy.value - 1) {
  let a: Client = {
    x: x,
    y: y,
    who: who.value
  }


  let index = -1
  if (who.value == 0) {
    // sort

    let otherHas = false
    blackSave.value.some((item, i) => {
      if (item.x == a.x && item.y == a.y) {
        index = i
        otherHas = true
        return true
      }
    })
    if (otherHas) return
    whiteSave.value.some((item, i) => {
      if (item.x == a.x && item.y == a.y) {
        index = i
        return true
      }
    })

    if (index > -1) {
      // whiteSave.value.splice(index, 1)
    } else {
      whiteSave.value.push(a)
      who.value = 1
    }

  } else {
    let otherHas = false
    whiteSave.value.some((item, i) => {
      if (item.x == a.x && item.y == a.y) {
        index = i
        otherHas = true
        return true
      }
    })
    if (otherHas) return
    blackSave.value.some((item, i) => {
      if (item.x == a.x && item.y == a.y) {
        index = i
        return true
      }
    })

    if (index > -1) {
    } else {
      blackSave.value.push(a)
      who.value = 0
    }
  }
  judgeWin()
}

const judgeWin = () => {
  console.log("into", whiteSave.value.length);

  if (whiteSave.value.length > 4) {
    // y win
    let sameWin = 0
    let same = 0
    let constant = 0
    whiteSave.value.filter((item, i) => {
      if (Math.abs(item.y - same) == 1 && item.x == constant) {
        sameWin++
      } else {
        sameWin = 0
      }
      same = item.y
      constant = item.x
      if (sameWin > 3) {
        alert("white win")
        isWin.value = true
        return true
      }
    })
    // x win
    same = 0
    sameWin = 0
    whiteSave.value.filter((item, i) => {
      if (item.x - same == 1) {
        sameWin++
      }
      same = item.x
      if (sameWin > 3) {
        alert("white win")
        isWin.value = true
        return true
      }
    })

  }

  if (blackSave.value.length > 4 && !isWin.value) {

  }
}

const judgeWhich = (x: number, y: number) => {

  let index = -1
  whiteSave.value.some((item, i) => {
    if (item.y == y && item.x == x) {
      index = i
      return true
    }
  })
  if (index > -1) {
    return 'whiteBox'
  }


  // else if (who.value == 1) {
  blackSave.value.some((item, i) => {
    if (item.y == y && item.x == x) {
      index = i
      return true
    }
  })
  if (index > -1) {
    return 'blackBox'
  }



}

let mywebSocket: WebSocket

const getQueryVariable = (variable) => {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
  return 0;
}


const connect = () => {
  mywebSocket = new WebSocket("ws://192.168.10.110:8182/ws?roomid=" + getQueryVariable('roomid') + "&uid=" + getQueryVariable('uid'))
  mywebSocket.onopen = () => {
    console.log("opening");
    let json: SendType = {
      type: type.mess,
      message: "isopen"
    }
    let jsons: string = JSON.stringify(json)
    // json.message = "isopen"
    mywebSocket.send(jsons)

  }
  mywebSocket.onmessage = (ev) => {
    
    let json:Message = JSON.parse(ev.data)
    try {
      console.log(JSON.parse(json.content));
    } catch (error) {
      console.log(json.content);
    }
    
    
  }

}

onMounted(() => {
  const boxYEle = document.querySelector(".box-x")
  gloy.value = boxYEle.clientWidth / 20
  glox.value = boxYEle.clientWidth / 20
  connect()
})
</script>

<template>
  <div class="box">
    <div class="box-x" v-for="(item,i) in glox">
      <div
        class="box-y"
        :class="judgeWhich(i, _i)"
        v-for="(_item,_i) in gloy + 2"
        v-if="item < glox"
        @click="click(i, _i)"
      ></div>
    </div>
    <!-- <div class="box-y" v-for="(item,i) in y + 1" :style="{ left: ((i - 1) * 20) + 'px' }"></div> -->
  </div>
</template>

<style scoped lang="scss">
.box {
  .blackBox {
    &::after {
      content: "";
      position: absolute;
      background: #000;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      top: 5px;
      left: 5px;
      z-index: 100;
    }
    position: relative;
  }
  .whiteBox {
    &::after {
      content: "";
      position: absolute;
      background: #fff;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      top: 5px;
      left: 5px;
      z-index: 100;
    }
    position: relative;
  }
  &-y {
    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 1px;
      top: 50%;
      background: #000;
    }
    &::after {
      content: "";
      position: absolute;
      width: 1px;
      left: 50%;
      height: 100%;
      background: #000;
    }
    position: relative;
    cursor: pointer;
    width: 19px;
    height: 20px;
  }
  &-x {
    display: flex;
    // margin-top: 19px;
    // width: 100%;
    // background: #000;
    // height: 1px;
  }
  width: 600px;
  margin: 0 auto;
  position: relative;
  background: #d1a077;
}
</style>
